import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { useCallback, useEffect } from 'react';
import { StyleSheet } from 'react-native';

import History from '@pages/Tabs/History';
import Home from '@pages/Tabs/Home';
import IconHistory from '@svgs/tabs/icon_history.svg';
import IconHistoryActive from '@svgs/tabs/icon_history_active.svg';
import IconHome from '@svgs/tabs/icon_home.svg';
import IconHomeActive from '@svgs/tabs/icon_home_active.svg';
import IconSettings from '@svgs/tabs/icon_setting.svg';
import IconSettingsActive from '@svgs/tabs/icon_setting_active.svg';
import { pxToVh } from '@utils/pxToVx.ts';

import Setting from './Setting';
import { HomeRouteParams } from '@/types/navigation';

const Tab = createBottomTabNavigator();
const Tabs = () => {
  const route = useRoute<RouteProp<{ params: HomeRouteParams }>>();
  const navigation = useNavigation();
  const initialRouteName = route.params?.homeInitialRouteName ?? 'Explore';

  const HomeTabBarIcon = useCallback((props: { focused: boolean; color: string; size: number }) => {
    return props.focused ? <IconHomeActive /> : <IconHome />;
  }, []);

  const ProfileTabBarIcon = useCallback((props: { focused: boolean; color: string; size: number }) => {
    return props.focused ? <IconSettingsActive /> : <IconSettings />;
  }, []);

  const HistoryTabBarIcon = useCallback((props: { focused: boolean; color: string; size: number }) => {
    return props.focused ? <IconHistoryActive /> : <IconHistory />;
  }, []);

  useEffect(() => navigation.setParams(undefined), []);

  return (
    <Tab.Navigator
      initialRouteName={initialRouteName}
      screenOptions={() => ({
        tabBarStyle: styles.tabBarStyle,
        tabBarActiveTintColor: '#278EFF',
        tabBarInactiveTintColor: '#9D9D9D',
        tabBarLabelStyle: styles.tabBarLabelStyle,
      })}
    >
      <Tab.Screen
        name="Explore"
        component={Home}
        options={{
          headerShown: false,
          tabBarIcon: HomeTabBarIcon,
        }}
      />

      <Tab.Screen
        name="History"
        component={History}
        options={{
          headerShown: false,
          tabBarIcon: HistoryTabBarIcon,
        }}
      />

      <Tab.Screen
        name="Profile"
        component={Setting}
        options={{
          headerShown: false,
          tabBarIcon: ProfileTabBarIcon,
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBarStyle: {
    backgroundColor: '#fff',
    borderTopWidth: pxToVh(0),
    borderColor: 'rgba(226, 226, 226, 0.08)',
    height: pxToVh(86),
    paddingTop: pxToVh(8),
  },
  tabBarLabelStyle: {
    fontSize: pxToVh(11),
    lineHeight: pxToVh(22),
    fontWeight: '500',
  },
});

export default Tabs;
